<template>
  <div class="aside-container">
    <!-- Logo 和标题区域 -->
    <div class="title-area" :class="{ collapsed: isCollapse }">
      <img src="@/assets/logo/logo2.png" alt="Logo" />
      <div class="title-with-icon" v-if="!isCollapse">
        <h2>水源地水质实时监测预警系统</h2>
      </div>
    </div>

    <!-- 菜单区域 -->
    <el-menu
      :default-active="activeIndex"
      background-color="#304156"
      text-color="#bfcbd9"
      active-text-color="#409EFF"
      :collapse="isCollapse"
      :collapse-transition="false"
      class="aside-menu"
      @select="handleSelect"
    >
      <!-- 一级菜单 -->
      <el-menu-item style="padding-left: 20px" index="Visualization">
        <el-icon><Odometer /></el-icon>
        <template #title>可视化大屏</template>
      </el-menu-item>

      <!-- 设备管理 -->
      <el-sub-menu index="device">
        <template #title>
          <el-icon><Monitor /></el-icon>
          <span>设备管理</span>
        </template>
        <el-menu-item index="DeviceList">
          <el-icon><Cpu /></el-icon>
          我的设备
        </el-menu-item>
        <el-menu-item index="Alarm">
          <el-icon><Bell /></el-icon>
          传感参数
        </el-menu-item>
        <el-menu-item index="More">
          <el-icon><More /></el-icon>
          更多操作
        </el-menu-item>
      </el-sub-menu>

      <!-- 系统管理 -->
      <el-sub-menu index="system">
        <template #title>
          <el-icon><Setting /></el-icon>
          <span>系统管理</span>
        </template>
        <el-menu-item index="UserList">
          <el-icon><User /></el-icon>
          用户管理
        </el-menu-item>
        <el-menu-item index="RoleSelect">
          <el-icon><UserFilled /></el-icon>
          角色列表
        </el-menu-item>
        <el-menu-item index="PermissionSelect">
          <el-icon><Menu /></el-icon>
          菜单管理
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

defineProps({
  isCollapse: Boolean,
})

defineEmits(['toggle-collapse'])

const router = useRouter()
const activeIndex = ref('dashboard')

const handleSelect = (index) => {
  router.push(`/${index}`)
}
</script>

<style scoped lang="less">
.title-area {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 左对齐 */
  padding: 10px 20px; /* 与菜单项对齐 */
  // transition: all 0.5s ease-in-out; /* 将时间从 0.3s 调整为 0.5s */

  img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    // box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    // transition: all 0.5s ease-in-out; /* 同步调整过渡时间 */
  }

  .title-with-icon {
    margin-left: 10px;
    overflow: hidden; /* 防止折叠时内容溢出 */

    h2 {
      margin: 0;
      font-size: 14px; // 调大字体，原为11px
      font-weight: normal;
      opacity: 1;
      white-space: nowrap; /* 防止文字换行 */
      color: white; /* 设置标题为白色 */
      transition:
        opacity 0.5s ease-in-out,
        margin-left 0.5s ease-in-out; /* 同步调整过渡时间 */
    }
  }

  &.collapsed {
    justify-content: center; /* 确保 logo 居中 */
    padding: 10px 0;
    transition: all 0.5s ease-in-out; /* 同步调整过渡时间 */

    img {
      margin-right: 0; /* 去掉右侧间距 */
    }

    .title-with-icon {
      h2 {
        opacity: 0; /* 隐藏标题 */
        margin-left: 0; /* 去掉左侧间距 */
      }
    }
  }
}

.aside-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #304156;
  transition: width 0.5s ease-in-out; /* 统一宽度过渡时间 */

  .aside-menu {
    border-right: none;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    transition: all 0.5s ease-in-out; /* 统一菜单过渡时间 */

    .el-menu-item {
      display: flex;
      align-items: center;
      justify-content: flex-start; /* 左对齐 */
      padding-left: 50px; /* 默认左侧内边距 */
      transition: all 0.5s ease-in-out; /* 统一菜单项过渡时间 */

      &.is-active {
        background-color: rgba(64, 158, 255, 0.1) !important; /* 激活状态背景色 */
        color: #409eff !important; /* 激活状态字体颜色 */
        font-weight: bold; /* 激活状态加粗字体 */
      }

      &:hover {
        background-color: rgba(64, 158, 255, 0.1) !important; /* 悬停时的背景色 */
      }

      .el-icon {
        margin-right: 10px; /* 图标与文字的间距 */
      }
    }
  }
}

.collapse-trigger {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bfcbd9;
  cursor: pointer;
  border-top: 1px solid rgba(191, 203, 217, 0.1);
  transition: all 0.5s ease; /* 调整触发器的过渡时间 */

  &:hover {
    background-color: #263445;
    color: #fff;
  }

  .el-icon {
    margin-right: 8px;
    font-size: 16px;
    transition: all 0.5s ease;
  }

  span {
    font-size: 12px;
    transition: all 0.5s ease;
  }
}
</style>
